<!--
 * @Author: 你的名字
 * @Date: 2023-03-13 16:56:25
 * @FilePath: /demo-gather/src/components/normal/export-file/export-file.vue
 * @Description: 
-->
<template>
  <div>
    <el-button class="export-file-btn" @click="exportFile"
      >导出分析报告</el-button
    >
    <el-dialog
      title="文件导出"
      :visible.sync="visible"
      width="11rem"
      :before-close="handleClose"
      :modal="false"
      append-to-body
      close-on-click-modal
    >
      <section class="export-file-content" id="printDom" ref="pdf">
        <template v-if="multPage">
          <ul
            class="pdf-dom"
            v-for="(ulItem, ulIndex) in fileList"
            :key="ulIndex"
          >
            <div v-if="ulIndex == 0" class="export-file-content-tit">
              {{ pdfTitle }}
            </div>
            <li
              class=""
              v-for="(item, index) in fileList[ulIndex]"
              :key="item.title + index"
              :class="
                !item.type || item.type !== 'title'
                  ? 'normal'
                  : 'export-file-content-p'
              "
            >
              <p
                v-if="
                  item.title &&
                  item.title != '' &&
                  (!item.type || item.type !== 'title')
                "
                class="pdf-title"
              >
                <span>{{ item.title + ":" }}</span>
              </p>
              <div
                class="pdf-chart-box"
                v-if="item.type && item.type == 'echarts'"
              >
                <ChartCom :options="changeOptionData(item.src)" />
              </div>
              <div
                class="table-box"
                v-else-if="item.type && item.type == 'table'"
              >
                <el-table :data="item.src" style="width: 100%" border>
                  <el-table-column type="index" width="50"> </el-table-column>
                  <el-table-column
                    v-for="(v, i) in item.column"
                    :key="v.prop + i"
                    :prop="v.prop"
                    :label="v.label"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div
                class="title-box"
                v-else-if="item.type && item.type == 'title'"
              >
                <p>{{ item.src }}</p>
              </div>
              <div v-else v-html="item.src"></div>
            </li>
          </ul>
        </template>
        <template v-else>
          <ul class="pdf-dom">
            <div class="export-file-content-tit">
              {{ pdfTitle }}
            </div>
            <li
              class=""
              v-for="(item, index) in fileList"
              :key="item.title + index"
              :class="
                !item.type || item.type !== 'title'
                  ? 'normal'
                  : 'export-file-content-p'
              "
            >
              <p
                v-if="
                  item.title &&
                  item.title != '' &&
                  (!item.type || item.type !== 'title')
                "
                class="pdf-title"
              >
                <span>{{ item.title + ":" }}</span>
              </p>
              <div
                class="pdf-chart-box"
                v-if="item.type && item.type == 'echarts'"
              >
                <ChartCom :options="changeOptionData(item.src)" />
              </div>
              <div
                class="table-box"
                v-else-if="item.type && item.type == 'table'"
              >
                <el-table :data="item.src" style="width: 100%" border>
                  <el-table-column type="index" width="50"> </el-table-column>
                  <el-table-column
                    v-for="(v, i) in item.column"
                    :key="v.prop + i"
                    :prop="v.prop"
                    :label="v.label"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div
                class="title-box"
                v-else-if="item.type && item.type == 'title'"
              >
                <p>{{ item.src }}</p>
              </div>
              <div v-else v-html="item.src"></div>
            </li>
          </ul>
        </template>
      </section>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="printPDF">下载文件</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { downloadPDF } from "@/lib/pdf.js"; //工具方法，导出操作
import ChartCom from "@/components/normal/chart-com/chart-com.vue";
import { changeOptionData } from "@/lib/utils.js";

export default {
  name: "export-file",
  components: {
    ChartCom,
  },
  props: {
    fileList: {
      type: Array,
      default: () => [
        {
          label: "标题",
          src: "",
        },
      ],
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    multPage: {
      type: Boolean,
      default: false,
    },
    pdfTitle: {
      type: String,
      default: "灾害分析报告",
    },
  },
  data() {
    return {
      newFileList: [],
    };
  },
  beforeMount() {
    // this.formateData();
  },
  computed:{
    visible(){
      return this.dialogVisible
    }
  },
  mounted() {},
  methods: {
    changeOptionData(opthin) {
      return changeOptionData(opthin);
    },
    // formateData() {
    //   let list = _.cloneDeep(this.fileList);
    //   let count = 0;
    //   let tempItem = null;
    //   this.newFileList = [];
    //   for (let j = 0; j < list.length; j++) {
    //     tempItem = _.cloneDeep(list[j]);
    //     console.log(tempItem, "tempItem");
    //     if (tempItem.type && tempItem.type == "title") {
    //       count++;
    //       console.log(count, "count");
    //       this.newFileList[count] = [tempItem];
    //       console.log(this.newFileList[count], "this.newFileList[count]");
    //     } else {
    //       this.newFileList[count].push(tempItem);
    //     }
    //   }
    // },
    exportFile() {
      this.$emit("exportFile");
      // this.formateData();
    },
    printPDF() {
      // downloadPDF(this.$refs.pdf, this.pdfTitle);
      const doms = document.querySelectorAll(".pdf-dom");
      downloadPDF(doms, this.pdfTitle);
    },
    handleClose() {
      this.$emit("update:dialogVisible", false);
    },
  },
};
</script>

<style lang='less' scope>
.el-dialog__body {
  height: 50vh;
  overflow-y: scroll;
}
.export-file-btn {
  height: 0.4rem;
  line-height: 0.4rem;
  margin: 0.05rem;
  padding: 0 0.15rem;
  background: #22a7e5;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.16rem;
  font-family: "GenJyuuGothic";
  max-width: 4.8rem;
  border: none;
  color: #fff;
}
.export-file-content {
  width: 100%;
  padding: 0.1rem;
  box-sizing: border-box;
  // background: rgba(49, 183, 233, 0.8);

  .export-file-content-tit {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    // margin: 0 0.1rem;
    padding: 0.1rem;
    background: #0f568e;
    text-align: center;
    font-size: 0.24rem;
    color: #fff;
    // font-weight: bold;
    // font-family: "Open24DisplaySt";
  }
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.2rem;
    li {
      box-sizing: border-box;
      width: 50%;
      // margin: 0.1rem 0;
      padding: 0.05rem 0.1rem;
      //       display: flex;
      //       // align-items: center;
      //     justify-content: space-between;
      // align-content:center;
      //     flex-wrap: wrap;
      //   div{
      //           width: 100%;
      //         }
      div{
        font-size: .16rem;
font-weight: normal;
      }
      &.export-file-content-p {
        width: 100%;
        border: 1px solid #dcdcdc;
        margin: 0.1rem 0;
      }
      p.pdf-title {
        width: 100%;
        height: 0.24rem;
        // background: url(/static/img/earthquakeInfoTitle.cbd64e85.png) no-repeat;
        text-align: left;
        background-size: cover;
        margin: 0.2rem 0;

        span {
          // font-family: "Open24DisplaySt";
          color: #333;
          // font-weight: bold;
          font-size: 0.24rem;
          line-height: 0.36rem;
        }
      }
      .pdf-chart-box {
        width: 100%;
        height: 2.8rem;

        // background: rgba(49, 183, 233, 0.9);
        // background: #333;
      }
      .title-box {
        p {
          margin: 0.1rem 0;
          font-weight: bold;

          font-size: 0.24rem;
          line-height: 1;
        }
      }
      .table-box {
        width: 100%;
      }
    }
  }
  .bg-Chart {
    min-height: 2rem !important;
    // scale: 2;
  }
  .box-card,
  .el-table {
    // background: inherit;
    background: transparent;
    width: 100%;

    /deep/tr {
      color: white;
      background-color: rgba(49, 183, 233, 0.4);
      font-size: 0.14rem;
    }
  }
  .box-card {
    border: none;

    /deep/.el-card__header {
      border-bottom: none;
      padding: 0.1rem;
    }

    .el-card__body {
      padding: 0;
    }

    .box-card-head-tit {
      font-size: 0.16rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #adebff;
    }

    span.plus {
      float: right;
      font-size: 0.2rem;
      color: #00c8c3;
    }

    .box-card-body-p {
      width: 100%;
      background: none;
      padding: 0;

      // opacity: 0.1;
      height: 0.28rem;
      // font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 0.28rem;

      color: #333;
font-size: .16rem;
font-weight: normal;
    
    }
  }

  .parentDiv {
    width: 100%;
    margin: 0.2rem 0.2rem 0.1rem 0.2rem;
    height: 1.4rem;
    display: flex;

    .leftDiv {
      height: 100%;
      width: 20%;
      margin-left: 0.1rem;

      .image3 {
        width: 0.88rem;
      }
    }

    .rightDiv {
      height: 100%;
      margin-left: 0.61rem;
      width: auto;
      display: grid;

      .image4 {
        width: 0.99rem;
        height: 0.15rem;
      }

      .jizhantuifuValue {
        width: 1.72rem;
        height: 0.33rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #00cefe;
        line-height: 0.33rem;
      }

      .image5 {
        width: 0.99rem;
        height: 0.15rem;
        margin-top: 0.14rem;
      }

      .jizhantuifubiliValue {
        width: 1.39rem;
        height: 0.33rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #56ed97;
        line-height: 0.33rem;
      }
    }
  }
}
.export-file-content .data .line .value-data .name {
  color: #333 !important;
  margin-left: 0.1rem;
}
.export-file-content .parentDiv {
  width: 100%;
  height: 2rem;
  margin: 0;
  padding: 0.2rem;
  background-color: rgba(49, 183, 233, 0.7);
  background-color: rgba(49, 183, 233, 0.7);

  background-color: rgba(49, 183, 233, 0.7);
}
.export-file-content .box-card .box-card-body-p,
.export-file-content .sex-ratio section .man span,
.export-file-content .sex-ratio section .woman span {
  color: #333;
}
</style>